<template>
    <div class="p-2 text-gray-500">关注列表</div>
    <div class="bg-white p-10">
        <el-row>
            <el-col :span="12" class="p-3" v-for="(item, index) in followList">
                <el-row>
                    <el-col :span="6" class="flex justify-center">
                        <el-image :src="baseUrl + item.other.avatar" class=" rounded-full"
                            style="width:120px;height:120px;" />
                    </el-col>
                    <el-col :span="12" class="p-3">
                        <div>{{ item.other.name }}</div>
                        <el-row class="text-xs text-gray-500 mt-10">
                            <el-col :span="12">歌单：{{ item.other.gedan }}</el-col>
                            <el-col :span="12">粉丝：{{ item.other.fans }}</el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="6" class="flex justify-center items-center">
                        <div class=" border-2 text-gray-500 pl-2 pr-2 pt-1 pb-1 rounded-xl flex items-center pointer">
                            <el-icon :size="18">
                                <Message />
                            </el-icon>
                            私信
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import { Message } from '@element-plus/icons-vue'
import { ref, computed, onMounted, watch } from "vue";
import { followIndex } from "@/http/api";
const page = ref(0);
const followList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
onMounted(() => {
    getFollowList();
});

const getFollowList = async (e) => {
    const { data } = await followIndex({
        page: page.value,
        limit: 6,
    });
    followList.value = data.follow.data;
};
</script>